<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0 0;
            margin: 0 0;
            box-sizing: border-box;
            user-select: none;
        }
        
        button{
            padding:10px 20px;
            border: 0;
            background-color: rgb(242,242,242);
            border: 2px solid transparent;
            border-radius: 5px;
            margin-top: 10px;
            margin-right: 5px;
        }

        button:hover{
            background-color: rgb(230,230,230);
            border: 2px solid rgb(200,200,200);
        }

        button:active{
            background-color: rgb(200,200,200);
            border: 2px solid rgb(200,200,200);
        }

        .title2{
            font-weight: bold;
            font-size: 18px;
            margin-top: 20px;
        }

        .p{
            line-height: 25px;
            margin-top: 10px;
            font-size: 14px;
        }

        input{
            margin-top: 10px;
        }

        .p-red{
            line-height: 25px;
            color: red;
            margin-top: 5px;
            font-size: 14px;
        }

        .title{
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .page{
            display: none;
        }

        .user-item{
            padding: 20px 20px;
            width: 100%;
            max-width: 600px;
        }

        .user-item:hover{
            background-color: rgb(230,230,230);
        }

        .user-item:active{
            background-color: rgb(242,242,242);
        }

        .col-item{
            padding: 10px 10px;
            width: 100%;
            max-width: 600px;
            border-radius: 5px;
            border: 1px solid lightgray;
            margin-bottom: 10px;
        }

        .page{
            padding-bottom: 40px;
        }

        .formWrapper{
            position: fixed;
            z-index: 10000;
            width: 100vw;
            height: 100vh;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,0.1);
            padding-left: 50vw;
            padding-top: 50vh;
            display: none;
        }

        .form{
            transform: translate(-50%,-50%);
            padding: 20px 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            background-color: white;
            width: 800px;
        }
    </style>
    <script>
        let isWorking = false
        let current = {
            user:undefined,
            password:undefined,
            database:undefined,
            table:undefined,
            databaseTables:undefined,
            currentTable:undefined,
        }
        function _class(classn){
            return document.getElementsByClassName(classn)
        }
        function _id(id){
            return document.getElementById(id)
        }
        async function sha256(message) {
          const encoder = new TextEncoder();
          const data = encoder.encode(message);
          const hashBuffer = await crypto.subtle.digest('SHA-256', data);
          const hashArray = Array.from(new Uint8Array(hashBuffer));
          const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
          return hashHex;
        }
        function request(url){
            return new Promise((resolve, reject) => {
              fetch(url).then(res=>{
                return resolve(res.json())
              })
            })
        }
        function waitSeconds(n){
            return new Promise((resolve, reject) => {
                setTimeout(()=>{
                    return resolve()
                },n*1000)
            })
        }
        async function loaded(){
            changePage(1)
            getUsers()
            document.body.style.display = 'none'
            await waitSeconds(0.21)
            document.body.style.display = 'unset'
        }
        async function changePage(id){
            await waitSeconds(0.2)
            let pages = document.getElementsByClassName("page")
            for(let i=0;i<pages.length;i++){
                pages[i].style.display = 'none'
            }
            pages[id-1].style.display = 'unset'
        }
        let users = []
        async function getUsers(){
            users = (await request("/userList")).results
            let usersinner = ''
            for(let i=0;i<users.length;i++){
                usersinner += '<div class="user-item" onclick="'
                usersinner += "userItemClick(" + (i+1).toString() + ")"
                usersinner += '">' + users[i] + '</div>'
            }
            document.getElementById("users").innerHTML = usersinner
            if(users.length==0){
                document.getElementById("users").innerHTML = '<p class="p">无用户</p>'
            }
        }
        async function userItemClick(id){
            showLoginForm()
            document.getElementById("loginFormUserName").innerText = users[id-1]
        }
        async function hideLoginForm(){
            document.getElementById("loginForm").style.display = 'none'
        }
        async function showLoginForm(){
            document.getElementById("loginForm").style.display = 'unset'
            document.getElementById("loginFormPassword").value = ""
        }
        async function login(){
            if(isWorking){
                return
            }
            isWorking = true
            document.getElementById("lfwt").innerText = ''
            let userName = document.getElementById("loginFormUserName").innerText
            let userPassword = await document.getElementById("loginFormPassword").value
            let re = await request("/loginUser/" + userName + "/" + userPassword)
            if(re.status==0){
                isWorking = false
                document.getElementById("lfwt").innerText = re.content
                return
            }
            current.user = userName
            current.password = userPassword
            for(let i=0;i<document.getElementsByClassName("t-u").length;i++){
                document.getElementsByClassName("t-u")[i].innerText = userName
            }
            await changePage(2)
            document.getElementById("loginForm").style.display = 'none'
            let databases = re.results
            let databasesinner = ''
            for(let i=0;i<databases.length;i++){
                databasesinner += '<div class="user-item" onclick="'
                databasesinner += "databaseItemClick('" + databases[i] + "')"
                databasesinner += '">' + databases[i] + '</div>'
            }
            document.getElementById("databases").innerHTML = databasesinner
            if(databases.length==0){
                document.getElementById("databases").innerHTML = '<p class="p">无数据库</p>'
            }
            isWorking = false
        }
        async function databaseItemClick(name){
            for(let i=0;i<document.getElementsByClassName("t-db").length;i++){
                document.getElementsByClassName("t-db")[i].innerText = name
            }
            changePage(3)
            let re = await request("/tableList/" + current.user + "/" + name)
            re.results = JSON.parse(re.results)
            current.database = name
            current.databaseTables = re.results
            let tables = re.results
            let tablesinner = ''
            for(let i=0;i<tables.length;i++){
                tablesinner += '<div class="user-item" onclick="'
                tablesinner += "tableItemClick('" + tables[i].name + "')"
                tablesinner += '">' + tables[i].name + '</div>'
            }
            document.getElementById("tables").innerHTML = tablesinner
            if(tables.length==0){
                document.getElementById("tables").innerHTML = '<p class="p">无表</p>'
            }
        }
        async function tableItemClick(name){
            document.getElementById("t-t").innerText = name
            current.table = name
            changePage(4)
            for(let i=0;i<current.databaseTables.length;i++){
                if(current.databaseTables[i].name==name){
                    current.currentTable = current.databaseTables[i]
                    break
                }
            }
            document.getElementById("tableName").value = name
            let colsHTML = ''
            for(let i=0;i<Object.keys(current.currentTable.columns).length;i++){
                if(Object.keys(current.currentTable.columns)[i]=='mark')continue
                colsHTML += getColItemHTMLString(Object.keys(current.currentTable.columns)[i],current.currentTable.columns[Object.keys(current.currentTable.columns)[i]],i!=1,i!=Object.keys(current.currentTable.columns).length-1)
            }
            document.getElementById('cols').innerHTML = colsHTML
            if(Object.keys(current.currentTable.columns).length==1){
                document.getElementById('cols').innerHTML = '<p class="p">无自定义列</p>'
            }
        }
        function getColItemHTMLString(name,type,enup,endn){
            let re = '<div class="col-item"><p>' + name + '(' + type + ')</p>'
            re += '<button onclick="changeColName(\'' + name + '\')">修改名称</button><button onclick="changeColType(\'' + name + '\',\'' + type + '\')"">切换为'
            re += (type=='string')?'number':'string'
            re += '类型</button><button onclick="deleteCol(\'' + name + '\')">删除</button><button onclick="moveCol(\'' + name + '\',\'up\')" '
            if(!enup){
                re += 'disabled="true"'
            }
            re += '>上移</button><button onclick="moveCol(\'' + name + '\',\'down\')" '
            if(!endn){
                re += 'disabled="true"'
            }
            re += '>下移</button></div>'
            return re
        }
        async function tableNameChanged(){
            if(document.getElementById("tableName").value=='' || document.getElementById("tableName").value==document.getElementById("t-t").innerText){
                document.getElementById("saveTableName").style.display = 'none'
            }else{
                document.getElementById("saveTableName").style.display = 'unset'
            }
        }
        function hideForm(formWrapperId){
            document.getElementById(formWrapperId).style.display = 'none'
        }
        function showForm(formWrapperId){
            document.getElementById(formWrapperId).style.display = 'unset'
        }
        function setFormWarningText(formName,text){
            document.getElementById(formName + "WarningText").innerText = text
        }
        function checkString(string){
            string = string.split('')
            for(let i=0;i<string.length;i++){
                if(string[i]=='_')continue
                string[i] = string[i].charCodeAt(0)
                if(string[i]>=48 && string[i]<=57){
                    continue
                }
                if(string[i]>=65 && string[i]<=90){
                    continue
                }
                if(string[i]>=97 && string[i]<=122){
                    continue
                }
                return false
            }
            return true
        }
        async function addUserFormOKClick(){
            if(isWorking){
                return
            }
            setFormWarningText('addUserForm','')
            let userName = document.getElementById('addUserFormUserName').value
            let userPassword = document.getElementById('addUserFormUserPassword').value
            let userRePassword = document.getElementById('addUserFormUserRePassword').value
            if(userName==''){
                setFormWarningText('addUserForm','请输入用户名')
                return
            }
            if(userPassword==''){
                setFormWarningText('addUserForm','请输入用户密码')
                return
            }
            if(userRePassword==''){
                setFormWarningText('addUserForm','请再次输入用户密码')
                return
            }
            if(checkString(userName)==false){
                setFormWarningText('addUserForm','用户名只能由大小写字母、数字和下划线组成')
                return
            }
            if(userName.length<4 || userName.length>32){
                setFormWarningText('addUserForm','用户名不能短于4位和长于32位')
                return
            }
            if(checkString(userPassword)==false){
                setFormWarningText('addUserForm','密码只能由大小写字母、数字和下划线组成')
                return
            }
            if(userPassword.length<6 || userPassword.length>16){
                setFormWarningText('addUserForm','密码不能短于6位和长于16位')
                return
            }
            if(userPassword!=userRePassword){
                setFormWarningText('addUserForm','两次输入的密码不一致')
                return
            }
            isWorking = true
            let re = await request("/addUser/" + userName + "/" + (await sha256(userPassword)))
            isWorking = false
            if(re.status==0){
                setFormWarningText("addUserForm",re.content)
                return
            }
            await getUsers()
            hideForm("addUserForm")
            document.getElementById('addUserFormUserName').value = ''
            document.getElementById('addUserFormUserPassword').value = ''
            document.getElementById('addUserFormUserRePassword').value = ''
        }
        async function deleteUser(){
            let un = _class("t-u")[0].innerText
            _id("deleteUserTitle").innerText = un
            setFormWarningText("deleteUserForm","")
            showForm('deleteUserForm')
        }
        async function deleteUserFormOKClick(){
            let un = _class("t-u")[0].innerText
            await request("/deleteUser/" + un)
            await changePage(1)
            hideForm("deleteUserForm")
            await getUsers()
        }
        async function addDatabaseFormOKClick(){
            let dn = _id("addDatabaseFormName").value
            if(dn==''){
                setFormWarningText("addDatabaseForm","请输入数据库名")
                return
            }
            if(checkString(dn)==false){
                setFormWarningText("addDatabaseForm","数据库名只能由大小写字母、数字和下划线组成")
                return
            }
            if(dn.length<4 || dn.length>32){
                setFormWarningText("addDatabaseForm","数据库名不能短于4位和长于32位")
                return
            }
            if(isWorking){
                return
            }
            isWorking = true
            let re = await request("/addDatabase/" + current.user + "/" + dn)
            isWorking = false
            if(re.status==0){
                setFormWarningText("addDatabaseForm",re.content)
                return
            }
            await login()
            hideForm("addDatabaseForm")
        }
        async function deleteDatabase(){
            _id("deleteDatabaseTitle").innerText = current.database
            showForm("deleteDatabaseForm")
        }
        async function deleteDatabaseFormOKClick(){
            let un = _class("t-u")[0].innerText
            await request("/deleteDatabase/" + un + "/" + _class("t-db")[0].innerText)
            hideForm("deleteDatabaseForm")
            await login()
        }
        async function addTableFormOKClick(){
            let dn = _id("addTableFormName").value
            if(dn==''){
                setFormWarningText("addTableForm","请输入表名")
                return
            }
            if(checkString(dn)==false){
                setFormWarningText("addTableForm","表名只能由大小写字母、数字和下划线组成")
                return
            }
            if(dn.length<4 || dn.length>32){
                setFormWarningText("addTableForm","表名不能短于4位和长于32位")
                return
            }
            if(isWorking){
                return
            }
            isWorking = true
            let re = await request("/addTable/" + current.user + "/" + current.database + "/" + _id("addTableFormName").value)
            isWorking = false
            if(re.status==0){
                setFormWarningText("addTableForm",re.content)
                return
            }
            await databaseItemClick(current.database)
            hideForm("addTableForm")
            _id("addTableFormName").value = ""
        }
        async function changeUserName(){
            _id('changeUserFormName').value = current.user
            showForm("changeUserForm")
        }
        async function changeUserFormOKClick(){
            let name = _id('changeUserFormName').value
            if(name==current.user){
                hideForm("changeUserForm")
                return
            }
            if(name==''){
                setFormWarningText('changeUserForm','请输入用户名')
                return
            }
            if(checkString(name)==false){
                setFormWarningText('changeUserForm','用户名只能由大小写字母、数字和下划线组成')
                return
            }
            if(name.length<4 || name.length>32){
                setFormWarningText('changeUserForm','用户名不能短于4位和长于32位')
                return
            }
            let re = await request("/changeUser/" + current.user + "/" + name)
            if(re.status==0){
                setFormWarningText("changeUserForm",re.content)
                return
            }
            changePage(1)
            getUsers()
            hideForm("changeUserForm")
        }
        async function changeDatabaseName(){
            _id('changeDatabaseFormName').value = current.database
            showForm("changeDatabaseForm")
        }
        async function changeDatabaseFormOKClick(){
            let name = _id('changeDatabaseFormName').value
            if(name==current.database){
                hideForm("changeDatabaseForm")
                return
            }
            if(name==''){
                setFormWarningText('changeDatabaseForm','请输入数据库名')
                return
            }
            if(checkString(name)==false){
                setFormWarningText('changeDatabaseForm','数据库名只能由大小写字母、数字和下划线组成')
                return
            }
            if(name.length<4 || name.length>32){
                setFormWarningText('changeDatabaseForm','数据库名不能短于4位和长于32位')
                return
            }
            let re = await request("/changeDatabase/" + current.user + "/" + current.database + "/" + name)
            if(re.status==0){
                setFormWarningText("changeDatabaseForm",re.content)
                return
            }
            login()
            hideForm("changeDatabaseForm")
        }
        async function addColFormOKClick(){
            if(isWorking){
                return
            }
            isWorking = true
            let colName = _id("addColFormName").value
            let colType = _id("addColFormType").value
            if(colName==''){
                setFormWarningText("addColForm","请输入列名")
                return
            }
            if(checkString(colName)==false){
                setFormWarningText("addColForm","列名应由大小写字母、数字和下划线组成")
                return
            }
            if(colType!='string' && colType!='number'){
                setFormWarningText("addColForm","列类型只能是string或number")
                return
            }
            let re = await request("/addCol/" + current.user + "/" + current.database + "/" + current.table + "/" + colName + "/" + colType + "/" + current.password)
            if(re.status==0){
                setFormWarningText("addColForm",re.content)
                isWorking = false
                return
            }
            await databaseItemClick(current.database)
            await tableItemClick(current.table)
            hideForm("addColForm")
            isWorking = false
        }
        async function changeTableName(){
            _id("changeTableNameWarningText").innerText = ''
            let dn = _id("tableName").value
            if(dn==''){
                _id("changeTableNameWarningText").innerText = "请输入表名"
                return
            }
            if(checkString(dn)==false){
                _id("changeTableNameWarningText").innerText = "表名只能由大小写字母、数字和下划线组成"
                return
            }
            if(dn.length<4 || dn.length>32){
                _id("changeTableNameWarningText").innerText = "表名不能短于4位和长于32位"
                return
            }
            showForm("workingForm")
            let re = await request("/changeTableName/" + current.user + "/" + current.database + "/" + current.table + "/" + dn)
            await databaseItemClick(current.database)
            await waitSeconds(1)
            if(re.status==0){
                _id("changeTableNameWarningText").innerText = re.content
                return
            }
            current.table = dn
            _id("saveTableName").style.display = 'none'
            _id("t-t").innerText = dn
            hideForm("workingForm")
        }
        async function changeColNameFormOKClick(){
            _id("changeColNameFormWarningText").value = ""
            let name = _id("changeColNameFormName").value
            if(name==current.col){
                hideForm("changeColNameForm")
                return
            }
            if(name==''){
                setFormWarningText("changeColNameForm","请输入列名")
                return
            }
            if(checkString(name)==false){
                setFormWarningText("changeColNameForm","列名应由大小写字母、数字和下划线组成")
                return
            }
            if(isWorking){
                return
            }
            isWorking = true
            let re = await request("/changeColName/" + current.user + "/" + current.database + "/" + current.table + "/" + current.col + "/" + name)
            if(re.status==0){
                setFormWarningText("changeColNameForm",re.content)
                isWorking = false
                return
            }
            hideForm("changeColNameForm")
            await databaseItemClick(current.database)
            await tableItemClick(current.table)
            isWorking = false
        }
        async function changeColName(name){
            showForm("changeColNameForm")
            current.col = name
            _id("changeColNameFormName").value = name
        }
        async function changeColType(name,ctype){
            current.col = name
            if(ctype=='string'){
                ctype = 'number'
            }else{
                ctype = 'string'
            }
            current.colType = ctype
            _id("changeColTypeTitle").innerText = name + '的类型修改为' + ctype + '类型？' + ((ctype=='string')?('此列数字将被转换成字符串。'):('此列可被视为数字的字符串将被转换为数字，其余将被转换为数字0。'))
            showForm("changeColTypeForm")
        }
        async function changeColTypeFormOKClick(){
            if(isWorking){
                return
            }
            isWorking = true
            let re = await request("/changeColType/" + current.user + "/" + current.database + "/" + current.table + "/" + current.col + "/" + current.colType + "/" + current.password)
            if(re.status==0){
                isWorking = false
                setFormWarningText("changeColTypeForm",re.content)
                return
            }
            hideForm("changeColTypeForm")
            await databaseItemClick(current.database)
            await tableItemClick(current.table)
            isWorking = false
        }
        async function deleteCol(name){
            current.col = name
            _id("deleteColTitle").innerText = name
            showForm("deleteColForm")
        }
        async function deleteColFormOKClick(){
            if(isWorking){
                return
            }
            isWorking = true
            let re = await request("/deleteCol/" + current.user + "/" + current.database + "/" + current.table + "/" + current.col + "/" + current.password)
            if(re.status==0){
                isWorking = false
                setFormWarningText("deleteColForm",re.content)
                return
            }
            hideForm("deleteColForm")
            await databaseItemClick(current.database)
            await tableItemClick(current.table)
            isWorking = false
        }
        async function moveCol(name,op){
            console.log(name,op)
            if(isWorking){
                return
            }
            isWorking = true
            current.col = name
            let re = undefined
            if(op=='up'){
                re = await request("/moveCol/" + current.user + "/" + current.database + "/" + current.table + "/" + current.col + "/up/" + current.password)
            }else{
                re = await request("/moveCol/" + current.user + "/" + current.database + "/" + current.table + "/" + current.col + "/down/" + current.password)
            }
            await databaseItemClick(current.database)
            await tableItemClick(current.table)
            isWorking = false
        }
        async function deleteTable(){
            _id("deleteTableTitle").innerText = current.table
            showForm("deleteTableForm")
        }
        async function deleteTableFormOKClick(){
            if(isWorking){
                return
            }
            isWorking = true
            let re = await request("/deleteTable/" + current.user + "/" + current.database + "/" + current.table + "/" + current.password)
            if(re.status==0){
                isWorking = false
                setFormWarningText("deleteTableForm",re.content)
                return
            }
            await databaseItemClick(current.database)
            await changePage(3)
            hideForm("deleteTableForm")
            isWorking = false
        }
        async function changeUserPassword(){
            showForm("changeUserPasswordForm")
            setFormWarningText('changeUserPasswordForm','')
        }
        async function changeUserPasswordFormOKClick(){
            setFormWarningText('changeUserPasswordForm','')
            let op = _id("changeUserPasswordFormOrUserPassword").value
            let np = _id("changeUserPasswordFormUserPassword").value
            let rnp = _id("changeUserPasswordFormUserRePassword").value
            if(op==''){
                setFormWarningText("changeUserPasswordForm","请输入原密码")
                return
            }
            if(np==''){
                setFormWarningText("changeUserPasswordForm","请输入新密码")
                return
            }
            if(rnp==''){
                setFormWarningText("changeUserPasswordForm","请输入再次输入新密码")
                return
            }
            if(checkString(np)==false){
                setFormWarningText('changeUserPasswordForm','密码只能由大小写字母、数字和下划线组成')
                return
            }
            if(np.length<6 || np.length>16){
                setFormWarningText('changeUserPasswordForm','密码不能短于6位和长于16位')
                return
            }
            if(np!=rnp){
                setFormWarningText('changeUserPasswordForm','两次输入的密码不一致')
                return
            }
            if(isWorking){
                return
            }
            isWorking = true
            let re = await request("/changeUserPassword/" + current.user + "/" + op + "/" + np)
            if(re.status==0){
                setFormWarningText('changeUserPasswordForm',re.content)
                isWorking = false
                return
            }
            _id("changeUserPasswordFormOrUserPassword").value = ''
            _id("changeUserPasswordFormUserPassword").value = ''
            _id("changeUserPasswordFormUserRePassword").value = ''
            isWorking = false
            hideForm("changeUserPasswordForm")
        }
    </script>
</head>
<body onload="loaded()" style="overflow-x: hidden;">
    <div class="formWrapper" id="loginForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">登录</p>
                <svg onclick="hideLoginForm()" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 60px;display: inline-block;">用户</span>
                    <span style="width: calc(100% - 65px);background-color: rgb(242,242,242);display: inline-block;border-radius: 5px;line-height: 45px;padding: 0 5px;" id="loginFormUserName"></span>
                    <br>
                    <span style="line-height: 45px;text-align: center;width: 60px;display: inline-block;">密码</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 65px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="password" name="" id="loginFormPassword">
                    <p class="p-red" id="lfwt"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideLoginForm()">取消</button>
                    <button onclick="login()">登录</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="addUserForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">添加用户</p>
                <svg onclick="hideForm('addUserForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">用户</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="text" name="" id="addUserFormUserName">
                    <br>
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">密码</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="password" name="" id="addUserFormUserPassword">
                    <br>
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">
                        重复密码</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="password" name="" id="addUserFormUserRePassword">
                    <p class="p-red" id="addUserFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('addUserForm')">取消</button>
                    <button onclick="addUserFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="workingForm">
        <div class="form">
            <div style="width: 100%;text-align: center;margin-bottom: 20px;">
                <p class="title2">请稍后</p>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="deleteUserForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">删除用户</p>
                <svg onclick="hideForm('deleteUserForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <p class="p">是否将<span id="deleteUserTitle"></span>彻底删除？此操作不可恢复。</p>
                    <p class="p-red" id="deleteUserFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('deleteUserForm')">取消</button>
                    <button onclick="deleteUserFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="addDatabaseForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">添加数据库</p>
                <svg onclick="hideForm('addDatabaseForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">名称</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="text" name="" id="addDatabaseFormName">
                    <p class="p-red" id="addDatabaseFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('addDatabaseForm')">取消</button>
                    <button onclick="addDatabaseFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="deleteDatabaseForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">删除数据库</p>
                <svg onclick="hideForm('deleteDatabaseForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <p class="p">是否将数据库<span id="deleteDatabaseTitle"></span>彻底删除？此操作不可恢复。</p>
                    <p class="p-red" id="deleteDatabaseFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('deleteDatabaseForm')">取消</button>
                    <button onclick="deleteDatabaseFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="addTableForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">添加表</p>
                <svg onclick="hideForm('addTableForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">名称</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="text" name="" id="addTableFormName">
                    <p class="p-red" id="addTableFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('addTableForm')">取消</button>
                    <button onclick="addTableFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="changeUserForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">修改用户</p>
                <svg onclick="hideForm('changeUserForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">名称</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="text" name="" id="changeUserFormName">
                    <p class="p-red" id="changeUserFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('changeUserForm')">取消</button>
                    <button onclick="changeUserFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="changeDatabaseForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">修改数据库</p>
                <svg onclick="hideForm('changeDatabaseForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">名称</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="text" name="" id="changeDatabaseFormName">
                    <p class="p-red" id="changeDatabaseFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('changeDatabaseForm')">取消</button>
                    <button onclick="changeDatabaseFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="addColForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">添加列</p>
                <svg onclick="hideForm('addColForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">名称</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="text" name="" id="addColFormName">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;margin-top: 20px;">类型</span>
                    <select id="addColFormType" style="height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;margin-top: 20px;">
                        <option>string</option>
                        <option>number</option>
                    </select>
                    <p class="p-red" id="addColFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('addColForm')">取消</button>
                    <button onclick="addColFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="changeColNameForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">修改列名</p>
                <svg onclick="hideForm('changeColNameForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">名称</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="text" name="" id="changeColNameFormName">
                    <p class="p-red" id="changeColNameFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('changeColNameForm')">取消</button>
                    <button onclick="changeColNameFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="changeColTypeForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">修改列类型</p>
                <svg onclick="hideForm('changeColTypeForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <p class="p">是否将列<span id="changeColTypeTitle"></span></p>
                    <p class="p-red" id="changeColTypeFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('changeColTypeForm')">取消</button>
                    <button onclick="changeColTypeFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="deleteColForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">删除列</p>
                <svg onclick="hideForm('deleteColForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <p class="p">是否将列<span id="deleteColTitle"></span>彻底删除？此操作不可恢复。</p>
                    <p class="p-red" id="deleteColFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('deleteColForm')">取消</button>
                    <button onclick="deleteColFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="deleteTableForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">删除表</p>
                <svg onclick="hideForm('deleteTableForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <p class="p">是否将表<span id="deleteTableTitle"></span>彻底删除？此操作不可恢复。</p>
                    <p class="p-red" id="deleteTableFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('deleteTableForm')">取消</button>
                    <button onclick="deleteTableFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="formWrapper" id="changeUserPasswordForm">
        <div class="form">
            <div style="position: relative;">
                <p class="title2" style="margin-top: 0;">修改用户密码</p>
                <svg onclick="hideForm('changeUserPasswordForm')" style="position: absolute;right: 5px;top: 0px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            </div>
            <div style="width: 100%;text-align: center;">
                <div style="display: inline-block;text-align: left;line-height: 30px;width: 60%;">
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">原密码</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="password" name="" id="changeUserPasswordFormOrUserPassword">
                    <br>
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">密码</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="password" name="" id="changeUserPasswordFormUserPassword">
                    <br>
                    <span style="line-height: 45px;text-align: center;width: 80px;display: inline-block;">
                        重复密码</span>
                    <input style="line-height: 45px;border: 0;width: calc(100% - 85px);display: inline-block;background-color: rgb(242,242,242);border-radius: 5px;padding: 0 5px;" type="password" name="" id="changeUserPasswordFormUserRePassword">
                    <p class="p-red" id="changeUserPasswordFormWarningText"></p>
                </div>
                <div style="text-align: right;">
                    <button onclick="hideForm('changeUserPasswordForm')">取消</button>
                    <button onclick="changeUserPasswordFormOKClick()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div style="width: 100vw;height: 100vh;padding: 40px 44px;">
        <p class="title">管理数据库</p>
        <div class="page">
            <p class="title2">用户列表</p>
            <div id="users" style="margin-top: 20px;">
                <!-- <div class="user-item" onclick="">
                    
                </div> -->
            </div>
            <p class="p">操作</p>
            <button onclick="showForm('addUserForm')">添加用户</button>
        </div>
        <div class="page">
            <p class="title2"><span style="cursor: pointer;" onclick="changePage(1)" class="t-u"></span>>数据库列表</p>
            <div id="databases" style="margin-top: 20px;">

            </div>
            <p class="p">操作</p>
            <button onclick="showForm('addDatabaseForm')">添加数据库</button>
            <button onclick="changeUserName()">修改用户名</button>
            <button onclick="changeUserPassword()">修改密码</button>
            <button onclick="deleteUser()">删除此用户</button>
        </div>
        <div class="page">
            <p class="title2"><span style="cursor: pointer;" onclick="changePage(1)" class="t-u"></span>><span onclick="changePage(2)" style="cursor: pointer;" class="t-db"></span>>表列表</p>
            <div id="tables" style="margin-top: 20px;">

            </div>
            <p class="p">操作</p>
            <button onclick="showForm('addTableForm')">添加表</button>
            <button onclick="changeDatabaseName()">修改数据库名</button>
            <button onclick="deleteDatabase()">删除此数据库</button>
        </div>
        <div class="page">
            <p class="title2"><span style="cursor: pointer;" onclick="changePage(1)" class="t-u"></span>><span onclick="changePage(2)" style="cursor: pointer;" class="t-db"></span>><span id="t-t" style="cursor: pointer;" onclick="databaseItemClick(current.database)"></span>>编辑表</p>
            <p class="p">名称</p>
            <div>
                <input oninput="tableNameChanged()" id="tableName" placeholder="表名" style="line-height: 40px;border-radius: 5px;background-color: rgb(242,242,242);;border: 0;margin-right: 5px;padding: 0 5px;" type="text" />
                <button onclick="changeTableName()" id="saveTableName" style="display: none;">保存表名</button>
            </div>
            <p class="p-red" id="changeTableNameWarningText"></p>
            <p class="p">索引列</p>
            <div style="margin-top: 20px;">
                <div class="col-item">
                    <p>mark(string)</p>
                    <button disabled="true">修改名称</button>
                    <button disabled="true">切换为Number类型</button>
                    <button disabled="true">删除</button>
                    <button disabled="true">上移</button>
                    <button disabled="true">下移</button>
                </div>
                <p class="p">自定义列</p>
                <div id="cols">
                    <div class="col-item">
                        <p>colName(string)</p>
                        <button>修改名称</button>
                        <button>切换为Number类型</button>
                        <button>删除</button>
                        <button>上移</button>
                        <button>下移</button>
                    </div>
                </div>
            </div>
            <p class="p">操作</p>
            <button onclick="showForm('addColForm')">添加列</button>
            <button onclick="deleteTable()">删除此表</button>
        </div>
    </div>
</body>
</html>